CSS Grid Masonry: Pinterest uslubidagi maketni amalga oshirishga chuqur kirish

Ko'p yillar davomida Pinterest tomonidan ommalashtirilgan "Masonry" maketi zamonaviy veb-dizaynning asosiy elementiga aylandi. Uning o'ziga xos "sharshara" effekti, ya'ni har xil balandlikdagi elementlar devordagi g'ishtlar kabi bir-biriga zich joylashishi, ham estetik jihatdan jozibali, ham kontentni namoyish qilish uchun juda samaralidir. Biroq, bu sodda ko'rinadigan maketni mustahkam, moslashuvchan va samarali tarzda amalga oshirish tarixan front-end dasturchilar uchun katta qiyinchilik tug'dirib kelgan va ko'pincha JavaScript kutubxonalariga qattiq bog'liqlikni talab qilgan.

CSS Grid-ning paydo bo'lishi veb-maketlar haqidagi tasavvurlarimizni inqilob qildi, ammo haqiqiy, tabiiy Masonry yechimi hali ham mavjud emas edi. Ya'ni, shu paytgacha. CSS Grid Layout Module Level 3 spetsifikatsiyasida grid-template-rows: masonry joriy etilishi bilan vaziyat o'zgarmoqda. Ushbu maqola butun dunyo dasturchilari uchun keng qamrovli qo'llanma bo'lib xizmat qiladi, sizni Masonry maketlarining evolyutsiyasi, ya'ni klassik aylanib o'tish yo'llaridan tortib, eng zamonaviy tabiiy CSS implementatsiyasigacha bo'lgan yo'ldan olib o'tadi va progressiv yaxshilashdan foydalangan holda amaliy, ishlab chiqarishga tayyor strategiyani taqdim etadi.

Masonry Maketi O'zi Nima?

Kodga sho'ng'ishdan oldin, keling, aniq va umumiy tushunchani shakllantirib olaylik. Masonry maketi - bu elementlar vertikal ravishda joylashtiriladigan, oldingi qatordagi qisqaroq elementlar qoldirgan bo'shliqlarni to'ldiradigan grid tizimidir. Qatordagi barcha elementlar gorizontal ravishda bir tekisda bo'lishi kerak bo'lgan qat'iy griddan farqli o'laroq, Masonry vertikal bo'shliqni optimallashtiradi. Natijada noqulay oq bo'shliqlarni oldini oladigan va dinamik vizual oqimni yaratadigan ixcham, bo'shliqsiz joylashuv hosil bo'ladi.

Asosiy xususiyatlari quyidagilardan iborat:

• Elementlar qat'iy ustun kengligiga, lekin o'zgaruvchan balandlikka ega.
• Elementlar vertikal ustunlarda joylashtiriladi.
• Qat'iy qator balandligi yo'q; elementlar mavjud bo'shliqni to'ldirish uchun oqadi.
• Konteynerning umumiy balandligi minimallashtiriladi.

Ushbu maket rasm galereyalari, portfoliolar, ijtimoiy tarmoq lentalari va elementlarning vertikal o'lchami oldindan aytib bo'lmaydigan har qanday kontentga boy boshqaruv panellari uchun idealdir.

Tarixiy Yondashuv: Ko'p Ustunli Maket ("Hiyla")

Uzoq vaqt davomida sof CSS Masonry maketiga eng yaqin keladigan yechim bu CSS Ko'p Ustunli Maket modulidan foydalanish edi. Ushbu usul column-count va column-gap kabi xususiyatlardan foydalanishni o'z ichiga oladi.

U Qanday Ishlaydi

Ko'p ustunli yondashuv sizning elementlar konteyneringizni go'yo yagona matn bloki sifatida ko'rib chiqadi va keyin uni bir nechta ustunlarga bo'ladi.

HTML struktura namunasi:

            <div class="multicolumn-container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- ko'proq elementlar -->
</div>
            

              
                Copy
              
            
          

CSS namunasi:

            .multicolumn-container {
  column-count: 3;
  column-gap: 1em;
}

.item {
  display: inline-block; /* Yoki kontekstga qarab block */
  width: 100%;
  margin-bottom: 1em;
  break-inside: avoid; /* Elementlarning ustunlar bo'ylab bo'linishini oldini oladi */
}
            

              
                Copy
              
            
          

Afzalliklari va Kamchiliklari

Afzalliklari:

• Soddalik: Buni bir necha qator CSS bilan amalga oshirish juda oson.
• A'lo brauzer qo'llab-quvvatlashi: Ko'p ustunli modul barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi, bu uni ishonchli tanlovga aylantiradi.

Kamchiliklari:

• Elementlarning tartibi: Bu eng katta kamchilikdir. Tarkib birinchi ustunning yuqorisidan pastiga qarab oqadi, so'ngra ikkinchi ustunning yuqorisidan davom etadi. Bu sizning elementlaringiz gorizontal emas, balki vertikal tartibda joylashishini anglatadi. 1-element 1-ustunda, 2-element uning ostida bo'lishi mumkin, 4-element esa 2-ustunning tepasida bo'ladi. Bu ko'pincha xronologik lentalar yoki reytingli kontent uchun istalgan foydalanuvchi tajribasi emas.
• Tarkibning bo'linishi: break-inside: avoid; xususiyati juda muhim, lekin har doim ham ish bermaydi. Ba'zi murakkab holatlarda elementning tarkibi baribir ikki ustunga bo'linib qolishi mumkin, bu esa juda nomaqbuldir.
• Cheklangan nazorat: Bu alohida elementlarning aniq joylashuvini nazorat qilish uchun juda kam imkoniyat beradi, bu esa uni murakkabroq maketlar uchun yaroqsiz qiladi.

Garchi bu aqlli aylanib o'tish usuli bo'lsa-da, ko'p ustunli yondashuv tubdan haqiqiy grid tizimi emas va ko'plab zamonaviy ilovalar uchun yetarli emas.

CSS Grid Davri: Qatorlarni Kengaytirish Orqali "Soxta" Masonry

CSS Grid paydo bo'lishi bilan dasturchilar darhol Masonry effektini takrorlashga harakat qilishdi. Grid ikki o'lchovli maketlarda ustun bo'lsa-da, u elementlarning oldindan aytib bo'ladigan qatorlar va ustunlar to'riga sig'ishini talab qiladi. Haqiqiy Masonry bu qoidani buzadi. Biroq, CSS Gridning kengaytirish imkoniyatlaridan foydalanib, effektni simulyatsiya qiladigan aqlli usul paydo bo'ldi.

U Qanday Ishlaydi

Ushbu usul ko'plab kichik, qat'iy balandlikdagi qatorlarga ega standart gridni sozlashni o'z ichiga oladi. Keyin har bir grid elementi o'zining kontent balandligiga qarab ma'lum bir miqdordagi qatorlarni egallashga yo'naltiriladi. Bu har bir element uchun kerakli kengaytirishni hisoblash uchun biroz JavaScript talab qiladi.

CSS namunasi:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1em;
  grid-auto-rows: 20px; /* Kichik, qat'iy qator balandligini belgilash */
}

.item {
  /* JavaScript bu yerga 'grid-row-end' qo'shadi */
}
            

              
                Copy
              
            
          

JavaScript namunasi (Konseptual):

            const grid = document.querySelector('.grid-container');
const items = document.querySelectorAll('.item');
const rowHeight = 20; // CSS'dagi grid-auto-rows bilan mos kelishi kerak
const rowGap = 16; // 1em, agar asosiy shrift o'lchami 16px bo'lsa

items.forEach(item => {
  const contentHeight = item.querySelector('.content').offsetHeight;
  const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = `span ${rowSpan}`;
});
            

              
                Copy
              
            
          

Afzalliklari va Kamchiliklari

Afzalliklari:

• To'g'ri element tartibi: Ko'p ustunli maketdan farqli o'laroq, elementlar chapdan o'ngga, yuqoridan pastga to'g'ri tartibda joylashtiriladi.
• Kuchli Grid xususiyatlari: Siz CSS Gridning barcha kuchidan, jumladan, tekislash, bo'shliqlar va minmax() yordamida moslashuvchan ustun ta'riflaridan foydalanishingiz mumkin.

Kamchiliklari:

• JavaScript-ga bog'liqlik: Bu sof CSS yechimi emas. U balandliklarni o'lchash va uslublarni qo'llash uchun kontent (ayniqsa, rasmlar) yuklangandan so'ng mijoz tomonida JavaScript ishlashini talab qiladi. Bu sahifaning dastlabki yuklanishidan keyin kontentning qayta joylashishiga yoki sakrashiga olib kelishi mumkin.
• Ishlash samaradorligiga yuk: Ushbu hisob-kitoblarni bajarish, ayniqsa yuzlab elementlarga ega sahifalarda, ishlash samaradorligiga ta'sir qilishi mumkin. Buni oyna hajmi o'zgarganda qayta hisoblash kerak.
• Murakkablik: Uni sozlash va qo'llab-quvvatlash oddiy CSS xususiyatiga qaraganda ancha murakkab.

Ushbu CSS Grid + JavaScript yondashuvi bir necha yillar davomida zamonaviy Masonry maketlari uchun de-fakto standartga aylandi va skriptlarga bog'liqligiga qaramay, nazorat va yakuniy ko'rinishning eng yaxshi muvozanatini taklif qildi.

Kelajak Hozir: grid-template-rows bilan Tabiiy CSS Masonry

Ko'plab dasturchilar kutgan lahza nihoyat kelmoqda. CSS Ishchi Guruhi CSS Grid spetsifikatsiyasi doirasida to'g'ridan-to'g'ri Masonry maketlariga erishishning tabiiy usulini belgilab berdi. Bunga grid-template-rows yoki grid-template-columns xususiyati uchun masonry qiymatidan foydalanish orqali erishiladi.

masonry Qiymatini Tushunish

Siz grid-template-rows: masonry; ni o'rnatganingizda, brauzerning render qilish mexanizmiga elementlarni joylashtirish uchun boshqa algoritmni qabul qilishni aytasiz. Qat'iy grid qatoriga rioya qilish o'rniga, elementlar eng ko'p bo'sh joy mavjud bo'lgan ustunga joylashtiriladi va Masonry-ning o'ziga xos zich effektini yaratadi.

Hozirgi Brauzer Qo'llab-quvvatlashi

MUHIM ESLATMA: Ushbu maqola yozilayotgan vaqtda, tabiiy CSS Masonry eksperimental xususiyatdir. Uning qo'llab-quvvatlanishi juda cheklangan. Bu kelajakka mo'ljallangan texnologiya.

• Firefox: Qo'llab-quvvatlanadi, lekin maxsus sozlama (feature flag) ortida. Uni yoqish uchun Firefox brauzeringizda about:config manziliga o'ting va layout.css.grid-template-masonry-value.enabled ni true qilib o'rnating.
• Safari: Avval Safari Technology Preview-da mavjud edi, lekin spetsifikatsiya yangilanishlarini kutish bilan olib tashlangan.
• Chrome/Edge: Hali amalga oshirilmagan.

Eng so'nggi qo'llab-quvvatlash ma'lumotlari uchun CanIUse.com kabi manbalarni tekshirish juda muhimdir. Qo'llab-quvvatlash keng tarqalmaganligi sababli, bu yechimni ishlab chiqarishda mustahkam zaxira strategiyasisiz ishlatib bo'lmaydi.

Tabiiy CSS Masonry-ni Qanday Amalga Oshirish Mumkin

Amalga oshirish juda sodda. Aynan shu narsa bu xususiyatni bunchalik hayajonli qiladi.

CSS namunasi:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 1em; /* 'gap' - grid-gap uchun zamonaviy qisqartma */
  align-items: start; /* Elementlarning o'z yo'lagining boshida boshlanishini ta'minlaydi */
}
            

              
                Copy
              
            
          

Bo'ldi shu. Keling, ushbu xususiyatlarni tahlil qilaylik:

• display: grid;: Asosiy boshlang'ich nuqta.
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));: Bu klassik moslashuvchan grid sozlamasi. U brauzerga sig'adigan darajada ko'p ustunlar yaratishni, har bir ustun kamida 250px kenglikda bo'lishini va qo'shimcha bo'shliqni to'ldirish uchun o'sishini aytadi.
• grid-template-rows: masonry;: Bu sehrli xususiyat. U qator maketi algoritmini standart griddan Masonry-ga o'zgartiradi.
• gap: 1em;: Barcha grid elementlari orasidagi masofani, ham gorizontal, ham vertikal ravishda belgilaydi.
• align-items: start;: Bu elementlarni o'zlarining grid yo'lagining boshiga tekislaydi. Vertikal Masonry maketi uchun bu standart xatti-harakatdir, lekin aniq ko'rsatish yaxshi amaliyotdir.

Ushbu kod bilan brauzer elementlarni joylashtirish uchun barcha murakkab hisob-kitoblarni o'zi bajaradi. JavaScript yo'q, qayta oqimlar yo'q, faqat sof, samarali CSS.

Ishlab chiqarishga Tayyor Strategiya: Progressiv Yaxshilash

Tabiiy CSS Masonry uchun universal brauzer qo'llab-quvvatlashining hozirgi yetishmasligini hisobga olgan holda, biz uni shunchaki ishlatib, eng yaxshisiga umid qila olmaymiz. Bizga ko'pchilik foydalanuvchilar uchun eng yaxshi tajribani ta'minlaydigan professional strategiya kerak. Javob - progressiv yaxshilash.

Bizning strategiyamiz quyidagicha bo'ladi:

1. Uni qo'llab-quvvatlaydigan brauzerlar uchun zamonaviy, tabiiy CSS Masonry-dan foydalanish.
2. Boshqa barcha brauzerlar uchun CSS Grid + JavaScript kengaytirish usulidan foydalangan holda mustahkam zaxira yechimini taqdim etish.

1-qadam: Asosiy CSS (Zaxira Yechim)

Biz JavaScript bilan ishlaydigan zaxira yechimimiz uchun CSS yozishdan boshlaymiz. Bu barcha brauzerlar dastlab qabul qiladigan kod bo'ladi.

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
  /* JS asosidagi kengaytirish hisob-kitobimiz uchun kichik qator balandligi */
  grid-auto-rows: 10px;
}

.item {
  /* Biz elementlar uchun ba'zi asosiy uslublarni qo'shamiz */
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 1em;
  box-sizing: border-box;
}
            

              
                Copy
              
            
          

2-qadam: JavaScript Zaxira Yechimi

Keyin, biz zaxira yechimini quvvatlantiradigan JavaScript-ni yozamiz. Ushbu skript faqat tabiiy CSS yechimi mavjud bo'lmaganda ishlaydi.

            // DOM to'liq yuklanishini kutish
document.addEventListener('DOMContentLoaded', () => {
  // Brauzer 'grid-template-rows: masonry' ni qo'llab-quvvatlashini tekshirish
  const isMasonrySupported = CSS.supports('grid-template-rows', 'masonry');

  if (!isMasonrySupported) {
    console.log("Brauzer tabiiy CSS Masonry-ni qo'llab-quvvatlamaydi. JS zaxira yechimi qo'llanilmoqda.");
    applyMasonryFallback();

    // Ixtiyoriy: Oyna hajmi o'zgarganda qayta ishga tushirish
    window.addEventListener('resize', debounce(applyMasonryFallback, 150));
  }
});

function applyMasonryFallback() {
  const container = document.querySelector('.masonry-container');
  if (!container) return;

  // Konteynerning barcha to'g'ridan-to'g'ri bolalarini olish
  const items = container.children;

  // Grid xususiyatlarini aniqlash (CSS bilan mos kelishi kerak)
  const rowHeight = 10; 
  const rowGap = 16; // 1em = 16px deb hisoblasak

  for (let item of items) {
    item.style.gridRowEnd = 'auto'; // Oldingi kengaytmalarni tiklash
    const itemHeight = item.offsetHeight;
    const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  }
}

// Funksiyaning qanchalik tez-tez ishga tushishini cheklaydigan debounce funksiyasi
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}
            

              
                Copy
              
            
          

3-qadam: @supports bilan Yaxshilash

Nihoyat, biz CSS @supports at-rule dan foydalanamiz. Bu brauzer ma'lum bir CSS xususiyat-qiymat juftligini tushunsa, faqatgina CSS qoidalarini qo'llashga imkon beradigan kuchli xususiyatdir. Bu bizning progressiv yaxshilashimizning yadrosidir.

Buni uslublar jadvalimizga qo'shamiz:

            /* Ushbu qoidalarni FAQAT brauzer tabiiy Masonry-ni qo'llab-quvvatlasa qo'llang */
@supports (grid-template-rows: masonry) {
  .masonry-container {
    /* Zaxira grid-auto-rows-ni bekor qilish */
    grid-template-rows: masonry;
    grid-auto-rows: unset; /* Yoki toza bo'lishi uchun 'auto' */
  }
}
            

              
                Copy
              
            
          

Barchasi Qanday Birlashadi

1. Zamonaviy brauzer (sozlamasi yoqilgan Firefox kabi): Brauzer CSS-ni o'qiydi. U grid-template-rows: masonry ni tushunadi. @supports bloki qo'llaniladi, grid-auto-rows ni bekor qiladi va tabiiy, samarali Masonry maketini yoqadi. Bizning JavaScript CSS.supports() ni tekshiradi, bu true qaytaradi, shuning uchun zaxira funksiyasi hech qachon ishga tushmaydi. Foydalanuvchi eng yaxshi tajribani oladi.
2. Standart brauzer (Chrome kabi): Brauzer CSS-ni o'qiydi. U grid-template-rows: masonry ni tushunmaydi, shuning uchun @supports blokini butunlay e'tiborsiz qoldiradi. U asosiy CSS-ni, shu jumladan grid-auto-rows: 10px ni qo'llaydi. Bizning JavaScript CSS.supports() ni tekshiradi, bu false qaytaradi. applyMasonryFallback() funksiyasi ishga tushiriladi, qator kengaytmalarini hisoblaydi va ularni grid elementlariga qo'llaydi. Foydalanuvchi JavaScript yordamida ishlaydigan to'liq funksional Masonry maketini oladi.

Ushbu yondashuv mustahkam, kelajakka mo'ljallangan va brauzer texnologiyasidan qat'i nazar, barcha uchun ajoyib tajriba taqdim etadi. Ko'proq brauzerlar tabiiy Masonry-ni qabul qilgani sari, JavaScript zaxira yechimi shunchaki kamroq va kamroq ishlatiladi, kodga hech qanday o'zgartirish kiritish kerak bo'lmaydi.

Xulosa: Kelajak Uchun Qurish

CSS-da oddiy, deklarativ Masonry maketiga erishish yo'li uzoq bo'ldi, ammo biz katta yutuq ostonasidamiz. grid-template-rows: masonry hali ham eksperimental bosqichda bo'lsa-da, u veb-maket imkoniyatlari uchun muhim bir qadamni anglatadi.

Butun dunyodagi dasturchilar uchun asosiy xulosa - kelajakni hisobga olgan holda qurishdir. Progressiv yaxshilashni qabul qilish orqali siz bugunoq ushbu kuchli yangi xususiyatlardan foydalanishni boshlashingiz mumkin. Siz eng zamonaviy brauzerlardagi foydalanuvchilarga yuqori samarali, tabiiy tajribani taqdim etishingiz va yaxshi ishlab chiqilgan JavaScript zaxira yechimi orqali boshqa barcha uchun mustahkam, funksional va vizual jihatdan bir xil tajribani ta'minlashingiz mumkin.

Fundamental maket namunalari uchun og'ir, uchinchi tomon kutubxonalariga tayanish kunlari sanoqlidir. CSS Grid, kengaytirish va yangi masonry qiymati tamoyillarini tushunib, siz kelajak avlodning go'zal, moslashuvchan va samarali veb-interfeyslarini yaratishga yaxshi tayyorgarlik ko'rgansiz.